<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">点击打开 Dialog</el-button>
 
      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
         width="30%"
        :before-close="handleClose">
        <!-- 日期选择器 -->
         <div class="block">
          <el-date-picker
            v-model="itemInfo.date"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>

        <!-- 输入框 -->
        <div class="mt15">
          <el-input v-model="itemInfo.name" placeholder="请输入姓名"></el-input>
        </div>


        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="success">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default { 
  data() {
      return {
        dialogVisible: false,
        itemInfo: {
          date: '',
          name:''
        }
        
      };
  },
  methods: {
    ...mapMutations("crud",["LIST_ADD_ITEM"]),
    //点击确定
    success() {
      this.dialogVisible = false
      this.itemInfo.date = this.itemInfo.date.getTime()
      console.log(this.itemInfo);
      this.LIST_ADD_ITEM({
        item:this.itemInfo
      })
      // 添加完成清空输入框了
      this.itemInfo = {}
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleClose(done) {
      
      this.$confirm("确认关闭？")
        .then(() => {
        done()
        })
        .catch(() => {
        
      })
    }
  }
}
</script>

<style>
.mt15{
  margin-top: 15px;
}
</style>